<template>
  <div>
    <div class="bg-color-fffff padding-20">
      <div class="flex align-center justify-around padding-left-right-70">
        <div class="t-center">
          <div class="padding-bottom-10">计划全年{{ typeName }}</div>
          <div class="font-size-22 font-weight-700">{{ planMoney | moneyFilterNoUnit }}<span class="font-size-14">万元</span></div>
        </div>
        <div class="split-line"></div>
        <div class="t-center">
          <div class="padding-bottom-10">上一年全年{{ typeName }}</div>
          <div class="font-size-22 font-weight-700">{{ lastYearMoney | moneyFilterNoUnit }}<span class="font-size-14">万元</span></div>
        </div>
        <div class="split-line"></div>
        <div v-if="type == 'income'">
          <div class="padding-bottom-10">
            差异值：<span :class="diffMoney > 0 ? 'color-green' : 'color-red'">{{ diffMoney | moneyFilterNoUnit }}万元</span>
          </div>
          <div>
            差异率：<span :class="diffRetio > 0 ? 'color-green' : 'color-red'">{{ diffRetio >= 0 ? '↑' : '↓' }}{{ Math.abs(diffRetio) }}%</span>
          </div>
        </div>

        <div v-if="type == 'pay'">
          <div class="padding-bottom-10">
            差异值：<span :class="diffMoney <= 0 ? 'color-green' : 'color-red'">{{ diffMoney | moneyFilterNoUnit }}万元</span>
          </div>
          <div>
            差异率：<span :class="diffRetio <= 0 ? 'color-green' : 'color-red'">{{ diffRetio > 0 ? '↑' : '↓' }}{{ Math.abs(diffRetio) }}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: '',
      },
      type: {
        type: String,
        default: '',
      },
      planMoney: {
        type: Number,
        default: 0,
      },
      lastYearMoney: {
        type: Number,
        default: 0,
      },
      diffMoney: {
        type: Number,
        default: 0,
      },
      diffRetio: {
        type: Number,
        default: 0,
      },
    },

    watch: {
      type: {
        immediate: true,
        handler(val) {
          this.typeName = val == 'income' ? '现金收入' : '支出';
        },
      },
    },

    data() {
      return {
        typeName: '',
      };
    },
  };
</script>

<style lang="scss" scoped>
  .split-line {
    width: 1px;
    height: 50px;
    background: #e5e5e5;
  }
</style>
